<template>
    <a-card>
        <div>
            <a-space class="operator">
                <a-button @click="addMenu" type="primary">新建</a-button>
                <a-button>批量操作</a-button>
                <a-dropdown>
                    <a-menu @click="handleMenuClick" slot="overlay">
                        <a-menu-item key="delete">删除</a-menu-item>
                    </a-menu>
                    <a-button>
                        更多操作
                        <a-icon type="down"/>
                    </a-button>
                </a-dropdown>
            </a-space>
            <standard-table
                    rowKey="id"
                    :columns="columns"
                    :dataSource="dataSource"
                    :selectedRows.sync="selectedRows"
            >
                <div slot="description" slot-scope="{text}">
                    {{text}}
                </div>
                <div slot="icon" slot-scope="{text}">
                    <a-icon :type="text"/>
                </div>
                <div slot="invisible" slot-scope="{text}">
                    <a-tag :color="text ? 'green' : 'grey'">
                        {{text ? '是' : '否'}}
                    </a-tag>
                </div>
                <div slot="action" slot-scope="{text, record}">
                    <a style="margin-right: 8px" @click="editMenu(record)">
                        <a-icon type="edit"/>编辑
                    </a>
                    <a-popconfirm
                            title="确定删除?"
                            ok-text="是"
                            cancel-text="否"
                            @confirm="confirmDelete(record.id)"

                    >
                        <a>
                            <a-icon type="delete"/>
                            删除
                        </a>
                    </a-popconfirm>
                </div>
            </standard-table>
        </div>
        <a-modal
                :title="action==='edit' ? '编辑菜单' : '新增菜单'"
                :visible="visible"
                :footer="null"
                destroyOnClose
                :confirm-loading="confirmLoading"
                @cancel="handleCancel"
        >
            <a-form @submit="submit" :form="form">
                <a-form-item
                        :label="$t('id')"
                        :labelCol="{span: 7}"
                        :wrapperCol="{span: 10}"
                        v-if="action==='edit'"
                >
                    <a-input disabled v-decorator="['id', {}]"/>
                </a-form-item>
                <a-form-item
                        :label="$t('menuName')"
                        :labelCol="{span: 7}"
                        :wrapperCol="{span: 10}"
                >
                    <a-input :placeholder="$t('menuNameInput')" allow-clear
                             v-decorator="['menuName', {rules: [{ required: true, message: $t('menuNameInput'), whitespace: true}]}]"/>
                </a-form-item>
                <a-form-item
                        :label="$t('router')"
                        :labelCol="{span: 7}"
                        :wrapperCol="{span: 10}"
                >
                    <a-input :placeholder="$t('routerInput')" allow-clear
                             v-decorator="['router', {}]"/>
                </a-form-item>
                <a-form-item
                        :label="$t('supMenu')"
                        :labelCol="{span: 7}"
                        :wrapperCol="{span: 10}"
                >
                    <a-tree-select
                            style="width: 100%"
                            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                            :tree-data="treeData"
                            :placeholder="$t('supMenuInput')"
                            v-decorator="['supMenu', {}]"
                    >
                        <span slot="title" slot-scope="{ menuId, title }" style="color: #08c">
                        </span>
                    </a-tree-select>
                </a-form-item>
                <a-form-item
                        :label="$t('path')"
                        :labelCol="{span: 7}"
                        :wrapperCol="{span: 10}"
                >
                    <a-input :placeholder="$t('pathInput')" allow-clear
                             v-decorator="['path', {}]"/>
                </a-form-item>
                <a-form-item
                        :label="$t('invisible')"
                        :labelCol="{span: 7}"
                        :wrapperCol="{span: 10}"
                >
                    <a-radio-group v-decorator="['invisible', {}]">
                        <a-radio :value="item.value"
                                 :checked="item.checked"
                                 v-for="item in options"
                                 :key="item.value">
                            {{item.name}}
                        </a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item
                        :label="$t('sort')"
                        :labelCol="{span: 7}"
                        :wrapperCol="{span: 10}"
                >
                    <a-input-number id="inputNumber"
                                    v-decorator="['sort', {}]"/>
                </a-form-item>
                <a-form-item
                        :label="$t('icon')"
                        :labelCol="{span: 7}"
                        :wrapperCol="{span: 10}"
                >
                    <a-input :placeholder="$t('iconInput')" allow-clear
                             v-decorator="['icon', {}]" @blur="inputChange">
                        <a-tooltip slot="suffix" :title="$t('icon')" v-show="iconInput">
                            <a-icon :type="iconInput" style="color: rgba(0,0,0,.45)"/>
                        </a-tooltip>
                    </a-input>
                    <span class="tip">参考Ant Design Vue图标库, 找
                        <a :href="$t('iconPath')" target="_blank">图标</a>
                    </span>
                </a-form-item>
                <a-form-item style="margin-left: 30px;margin-top: 24px" :wrapperCol="{span: 10, offset: 7}">
                    <a-button type="primary" htmlType="submit">{{$t('submit')}}</a-button>
                    <a-button style="margin-left: 8px" @click="handleCancel">{{$t('cancel')}}</a-button>
                </a-form-item>
            </a-form>
        </a-modal>
    </a-card>
</template>

<script>
    import StandardTable from '@/components/table/StandardTable'
    import {getMenuList, menuSelect, saveMenu, updateMenu, deleteMenu} from '@/services/menu'

    const columns = [
        {
            title: '菜单名称',
            dataIndex: 'name',
        },
        {
            title: '图标',
            dataIndex: 'icon',
            scopedSlots: {customRender: 'icon'},
        },
        {
            title: '上级菜单',
            dataIndex: 'supMenu',
            slots: {title: 'supMenu'}
        },
        {
            title: '注册名',
            dataIndex: 'router',
        },
        {
            title: '路由',
            dataIndex: 'path',
        },
        {
            title: '是否隐藏',
            dataIndex: 'invisible',
            scopedSlots: {customRender: 'invisible'},
        },
        {
            title: '操作',
            scopedSlots: {customRender: 'action'}
        }
    ];

    export default {
        name: 'roleList',
        i18n: require('./i18n'),
        components: {StandardTable},
        data() {
            return {
                treeData: [],
                value: undefined,
                form: this.$form.createForm(this),
                visible: false,
                confirmLoading: false,
                advanced: false,
                action: '',
                columns: columns,
                dataSource: [],
                selectedRows: [],
                page: 1,
                limit: 10,
                total: 0,
                iconInput: '',
                options: [
                    {checked: false, value: 1, name: '隐藏'},
                    {checked: true, value: 0, name: '不隐藏'},
                ]
            }
        },
        authorize: {
            deleteRecord: 'delete'
        },
        created() {
            //获取菜单列表
            this.getMenuList();
        },
        methods: {
            menuSelect() {
                menuSelect().then(result => {
                    const res = result.data;
                    if (res && res.code === "00000") {
                        this.treeData = res.result
                    } else {
                        this.$message.error(res.message, 1)
                    }
                })
            },
            /** 改变icon图标**/
            getIcon() {
                this.iconInput = this.form.getFieldValue('icon');
            },
            /** 提交数据**/
            submit(e) {
                e.preventDefault();
                this.form.validateFields((err) => {
                    if (!err) {
                        const id = this.form.getFieldValue('id');
                        const menuName = this.form.getFieldValue('menuName');
                        const supMenu = this.form.getFieldValue('supMenu');
                        const icon = this.form.getFieldValue('icon');
                        const path = this.form.getFieldValue('path');
                        const sort = this.form.getFieldValue('sort');
                        const router = this.form.getFieldValue('router');
                        const invisible = this.form.getFieldValue('invisible');
                        if (this.action === 'add') {
                            saveMenu(menuName, supMenu, path, icon, router, invisible, sort).then(result => {
                                const res = result.data;
                                if (res && res.code === "00000") {
                                    this.$message.success(res.message, 1)
                                } else {
                                    this.$message.error(res.message, 1)
                                }
                            })
                        } else {
                            updateMenu(id, menuName, supMenu, path, icon, router,invisible, sort).then(result => {
                                const res = result.data;
                                if (res && res.code === "00000") {
                                    this.$message.success(res.message, 1)
                                } else {
                                    this.$message.error(res.message, 1)
                                }
                            })
                        }
                        //刷新列表
                        this.getMenuList();
                    }
                });
                this.visible = false;
            },
            /** 关闭对话框**/
            handleCancel() {
                this.visible = false;
            },
            /** 确认删除**/
            confirmDelete(id) {
                const ids = [];
                ids.push(id);
                this.deleteMenu(ids)
            },
            /** 删除菜单**/
            deleteMenu(ids) {
                deleteMenu(ids).then(result => {
                    const res = result.data;
                    if (res && res.code === "00000") {
                        this.$message.success(res.message, 1);
                        this.getMenuList();
                    } else {
                        this.$message.error(res.message, 1)
                    }
                });
            },
            /** 添加菜单**/
            addMenu() {
                //清空表单
                this.form.resetFields();
                //改变行为
                this.action = 'add';
                //图标重置
                this.iconInput = '';
                //树形菜单渲染
                this.menuSelect();
                //打开对话框
                this.visible = true;
            },
            /** 修改菜单**/
            editMenu(record) {
                //清空表单
                this.form.resetFields();
                if (record) {
                    this.action = 'edit';
                }
                //树形菜单渲染
                this.menuSelect();
                this.visible = true;
                this.$nextTick(() => {
                    setTimeout(() => { // 添加延时操作
                        this.form.setFieldsValue({ // form表单赋值
                            id: record.id,
                            menuName: record.name,
                            supMenu: record.pid,
                            icon: record.icon,
                            path: record.path,
                            sort: record.sort,
                            router: record.router,
                            invisible: record.invisible,
                        });
                        this.getIcon();
                    });
                });
            },
            /** 获取菜单列表**/
            getMenuList() {
                getMenuList().then(result => {
                    const res = result.data;
                    if (res && res.code === "00000") {
                        this.dataSource = res.result;
                    } else {
                        this.$message.error(res.message, 3)
                    }
                })
            },
            toggleAdvanced() {
                this.advanced = !this.advanced
            },
            inputChange() {
                //动态设置icon
                this.iconInput = this.form.getFieldValue('icon');
            },
            /** 批量操作 **/
            handleMenuClick(e) {
                if (e.key === 'delete') {
                    //删除
                    let self = this;
                    this.$confirm({
                        title: '确认提示',
                        content: `是否确认删除？`,
                        okButtonProps: {
                            color: this.themeColor,
                        },
                        onOk() {
                            self.selectedRows = self.selectedRows.map((item) => item.id);
                            self.deleteMenu(self.selectedRows);
                        }
                    });
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .search {
        margin-bottom: 54px;
    }

    .fold {
        width: calc(100% - 216px);
        display: inline-block
    }

    .operator {
        margin-bottom: 18px;
    }

    @media screen and (max-width: 900px) {
        .fold {
            width: 100%;
        }
    }

    .tip {
        font-size: smaller;
    }
</style>
